<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        
        .box {
            min-width: 600px;
            min-height: 300px;
        }
        
        .text {
            width: 600px;
            height: 70px;
            border: 1px solid #000;
        }
        
        .text b {
            display: block;
            width: 150px;
            height: 70px;
            font-size: 17px;
            text-align: center;
            line-height: 70px;
            float: left;
        }
        
        .list {
            width: 600px;
            overflow: auto;
        }
        
        .list ul {
            width: 148px;
            height: 500px;
            float: left;
            border: 1px solid #000;
            overflow: auto;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="text">
            <b>省</b>
            <b>市</b>
            <b>区(县)</b>
            <b>街道</b>
        </div>
        <div class="list">
            <ul class="sheng">1</ul>
            <ul class="shi">1</ul>
            <ul class="qu">1</ul>
            <ul class="jiedao">1</ul>
           
        </div>
    </div>
    <script src="./ajax.js"></script>
    <script src="./city.js"></script>
    <script>
    new Ajax({                         
    type:'get',  //请求方式
    url:'./street.json', //请求路径
    async:true,   //异步
    //回调函数
    fn:function(data){
        //实例化
        new City({
            data:data,
            sheng:document.querySelector('.sheng'),
            shi:document.querySelector('.shi'),
            qu:document.querySelector('.qu'),
            jiedao:document.querySelector('.jiedao'),
        })
    } 
    

})

    </script>
</body>
</html>